import React from "react";

import styles from "./index.module.less";
import { SessionMessageI } from "../../../../types/system";

interface PropsI {
  data: SessionMessageI[];
  handleSwitchSession: (params: SessionMessageI) => void;
  children?: React.ReactElement;
}

const SessionList: React.FC<PropsI> = (props: PropsI) => {
  const { data, handleSwitchSession } = props;

  // const handleSwitchSession = (params: SessionMessageI) => {
  // 	console.log(params);
  // };

  const handleArchiveClick = (params: SessionMessageI) => {
    console.log(params);
  };

  return (
    <div className={styles.wrapper}>
      <div>
        {data.map((item: SessionMessageI) => {
          return (
            <div
              onClick={() => {
                handleSwitchSession(item);
              }}
              key={item.id}
              className={styles.session}
            >
              <div>
                <a href="/">{item.title}</a>
              </div>
              <div>
                <span
                  onClick={() => {
                    handleArchiveClick(item);
                  }}
                  className=""
                  data-state="closed"
                >
                  {item.archived ? (
                    <button>取消收藏</button>
                  ) : (
                    <button>收藏</button>
                  )}
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default SessionList;
